<template>
    <div ref="canvas" style="height: 90vh"></div>
</template>
<!--:http-request="httpRequest"-->
<script>
import BpmnJS from 'bpmn-js/lib/Modeler'
import camundaExtensionModule from 'camunda-bpmn-moddle/lib'
import camundaModdle from 'camunda-bpmn-moddle/resources/camunda'

// import {xmlStr} from "@/views/xmlData";


export default {
  name: "WorkflowList",
  data() {
    return {
      modeler: null,
      fileList: []
    }
  },
  mounted() {
    const canvas = this.$refs.canvas
    this.modeler = new BpmnJS({
      container: canvas,
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [camundaExtensionModule],
      moddleExtensions: {
        camunda: camundaModdle
      }
    })
    this.modeler.create()
    // this.createNewDiagram() // 新增流程定义
    // this.modeler.importXML(xmlStr)
    // this.modeler.get('canvas').zoom('fit-viewport', 'auto');
  },
  methods: {
    createNewDiagram() {
      const bpmnXmlStr = `
      <?xml version="1.0" encoding="UTF-8"?>
        <bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
          <bpmn2:process id="process1567044459787" name="流程1567044459787">
            <bpmn2:documentation>描述</bpmn2:documentation>
            <bpmn2:startEvent id="StartEvent_1" name="开始"/>
          </bpmn2:process>
          <bpmndi:BPMNDiagram id="BPMNDiagram_1">
            <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
              <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
                <dc:Bounds x="184" y="64" width="36" height="36"/>
                <bpmndi:BPMNLabel>
                  <dc:Bounds x="191" y="40" width="22" height="14"/>
                </bpmndi:BPMNLabel>
              </bpmndi:BPMNShape>
            </bpmndi:BPMNPlane>
          </bpmndi:BPMNDiagram>
        <processType id="test"/></bpmn2:definitions>
      `
      // 将字符串转换成图显示出来
      this.modeler.importXML(bpmnXmlStr, (err) => {
        if (err) {
          console.error(err)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>